<template>
	<view class="container">

		<uni-card>
			<view class="title">核销码 MC-1234-5678-9012</view>
			<view class="sub-title">车辆：奔驰FWE4/豫A98FHJ</view>
			<view class="service">
				<view class="serve">
					服务内容
				</view>
				<view class="info">
					<view class="car">车辆精洗</view>
					<view class="money">￥100.00</view>
				</view>
				<view class="info">
					<view class="car">车辆附加费用 </view>
					<view class="money">￥100.00</view>
				</view>
			</view>
		</uni-card>
		<uni-card>
			<view class="title">订单信息</view>
			<view class="service">
				<view class="info">
					<view class="car">原价</view>
					<view class="money">￥100.00</view>
				</view>
				<view class="info">
					<view class="car">优惠 </view>
					<view class="money">-￥10.00</view>
				</view>
				<view class="info">
					<view class="car">实付金额 </view>
					<view class="money">￥25.00</view>
				</view>
				<view class="info">
					<view class="car">订单编号 </view>
					<view class="money">1223233445</view>
				</view>
				<view class="info">
					<view class="car">预约时间 </view>
					<view class="money">2020-02-18 19:24:28 </view>
				</view>
				<view class="info">
					<view class="car">支付时间 </view>
					<view class="money">2020-02-18 19:24:28 </view>
				</view>
				<view class="info">
					<view class="car">核销时间 </view>
					<view class="money"> </view>
				</view>
			</view>
		</uni-card>
		<button class="button" @click="toggle"
			:style="{ backgroundColor: isVerified ? 'rgba(154,154,154,1)' : 'rgba(13,122,247,1)'}"><text
				class="button-text">{{ isVerified ? '已核销' : '确认核销' }} </text></button>
		<yfx-tooltip ref="tooltip"></yfx-tooltip>
	</view>
</template>

<script>
	export default {
		data() {
			return {
isVerified:false,
			}
		},
		methods: {
			//显示弹窗
			toggle() {
				this.$refs.tooltip.open({
					msg: "核销此订单",
					content: "请您仔细核对订单，此操作不可撤销，请谨慎操作",
					confirm: () => {
						console.log("点击确认按钮触发")
						this.isVerified = true; // 更新状态  
					},
					cancel: () => {
						console.log("点击取消按钮触发")
					}
				})
			},

		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.title {
		font-size: 30rpx;
		font-weight: bold;
		color: rgba(16, 16, 16, 1);
	}

	.sub-title {
		margin-top: 10rpx;
		font-size: 28rpx;
		color: rgba(16, 16, 16, 1);
		margin-bottom: 30rpx;
	}

	.service {
		border-top: 1rpx solid rgba(239, 239, 239, 1);
		margin-top: 20rpx;
	}

	.serve {
		margin-top: 20rpx;
		font-size: 28rpx;
		color: rgba(16, 16, 16, 1);
		font-weight: bold;
	}

	.info {
		display: flex;
		margin-top: 10rpx;
	}

	.car {
		font-size: 28rpx;
		color: rgba(16, 16, 16, 1);
		width: 240rpx;
	}

	.money {
		font-size: 28rpx;
		color: rgba(16, 16, 16, 1);
		width: 340rpx;
		text-align: right;
		margin-left: 40rpx;
	}
	.button {
		width: 524rpx;
		height: 80rpx;
		border-radius: 32rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: rgba(13, 122, 247, 1);
		color: rgba(255, 255, 255, 1);
		margin-top: 50rpx;
	}
</style>